import React from 'react'
import { Layout, Dropdown, Menu, Avatar} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'

const { Header } = Layout;

function TopHeader(props) {
  // const [collapsed,setCollapsed] = useState(false)
  //折叠 取反
  const changeCollapsed = ()=>{
    //改变state的isCollapsed
    // console.log(props)
    props.changeCollapsed()
  }

//   const {role:username} = JSON.parse(localStorage.getItem("isTrue"))
  const menu = (
    <Menu>
      <Menu.Item danger onClick={()=>{
        localStorage.removeItem("isTrue")
        props.history.replace('/login')
      }}>退出</Menu.Item>
    </Menu>
  )

  return (
    <Header className="site-layout-background" 
      style={{ padding: '0 20px' }}>
      {
        props.isCollapsed?<MenuUnfoldOutlined onClick={changeCollapsed}/>
        :
        <MenuFoldOutlined onClick={changeCollapsed} />
      }

      <div style={{float:"right"}}>
    <span style={{marginRight:"10px"}}>欢迎回来</span>
        <Dropdown overlay={menu}>
            <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
  </Header>
  )
}

const mapStateToprops = ({CollapsedReducer:{isCollapsed}})=>{
  return {
    isCollapsed
  }
}

const mapDispatchToProps = {
  changeCollapsed(){
    return {
      type:"change_collapsed"
    } //action
  }
}
export default connect(mapStateToprops,mapDispatchToProps)
  (withRouter(TopHeader))